<template>
	<view class="content">
		<view 
			class="user-info-item"
			v-for="(item, index) in userArray" 
			:key="index"
			@click="navigateToDemo(index + 1)"
		>
			<UserInfo :userinfo="item"></UserInfo>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";

const userArray = ref([
	{name:"张三", avatar:"../../static/pic1.png"},
	{name:"李四", avatar:"../../static/pic2.png"},
	{name:"王麻子", avatar:"../../static/pic4.jpg"}
])

// 导航到对应的页面
const navigateToDemo = (index) => {
	if (index === 2) {
		// 如果是第二个，跳转到 edit 页面
		uni.navigateTo({
			url: '/pages/edit/edit'
		})
	} else {
		// 其他情况跳转到对应的 demo 页面
		uni.navigateTo({
			url: `/pages/demo${index}/demo${index}`
		})
	}
}
</script>

<style>
.content {
	padding: 20px;
}

.user-info-item {
	margin-bottom: 20px;
	cursor: pointer;
}

.user-info-item:hover {
	opacity: 0.8;
}
</style>
